@page "/"
@model IndexModel

@{
    ViewData["Title"] = "My List";
}

<h1>Things To Do</h1>
<hr />
@if (!User.Identity!.IsAuthenticated)
{
    <p class="lead">
        Sign in with your GitHub account to manage your Todo list.
    </p>
    <form action="~/sign-in" method="post">
        <button class="btn btn-lg btn-primary m-1" id="sign-in" type="submit">Sign in</button>
    </form>
}
else
{
    <h2>
        My List
        <div class="h6 spinner-border" id="loader" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </h2>

    <div class="alert alert-success lead d-none" id="banner" role="alert">
        <em>Relax</em> - You've done everything! 🌈
    </div>

    <div>
        <table class="table d-none" id="item-table">
            <thead class="thead-light">
                <tr>
                    <th class="w-50" scope="col">Item</th>
                    <th class="w-25" scope="col">Last Updated</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody id="item-list">
                <tr class="d-none" id="item-template" data-id="" data-completed="" data-timestamp="">
                    <td class=todo-item-text>
                    </td>
                    <td class="todo-item-timestamp"></td>
                    <td>
                        <button class="btn btn-success d-none todo-item-complete">Done</button>
                    </td>
                    <td>
                        <button class="btn btn-danger todo-item-delete">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr />

    <h2>Add New Item</h2>

    <form id="add-form" class="form-inline" role="form">

        <label class="sr-only" for="new-item-text">Thing to do</label>

        <input autocomplete="off"
               autofocus
               class="form-control form-control-lg mr-sm-2 w-75"
               id="new-item-text"
               name="text"
               placeholder="Buy eggs 🥚"
               type="text">

        <button class="btn btn-lg btn-primary" disabled id="add-new-item" type="submit">Add</button>

    </form>
}
